<!doctype html>
<!--[if lt IE 7]>
<html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>
<html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>
<html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="en"> <!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>Ram & Antara getting hitched!</title>
    <meta name="description" content="We would like to invite you to our big day.">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="theme-color" content="#ffffff">
    <meta property="og:title" content="Ram & Antara getting hitched">
    <meta property="og:description" content="We would like to invite you to our big day.">
    <meta property="og:image" content="https://wedding.ramswaroop.me/img/hero-min.jpg">
    <meta property="og:type" content="website">
    <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
    <link rel="manifest" href="manifest.json">
    <link rel="mask-icon" href="safari-pinned-tab.svg" color="#5bbad5">

    <script>
        // load css files from CDN if local node_modules fail
        function loadCssFromCDN(css) {
            // create new link tag
            const link = document.createElement('link');
            if (css === 'animate.css') {
                link.href = 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css';
            } else if (css === 'font-awesome.css') {
                link.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css';
            }
            link.rel = 'stylesheet';

            // add link tag to head section
            document.getElementsByTagName('head')[0].appendChild(link);
        }

        // load js files from CDN if local node_modules fail
        function loadJsFromCDN(js) {
            if (js === 'waypoints.js') {
                document.write('<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.js"><\/script>');
            } else if (js === 'jquery.js') {
                document.write('<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"><\/script>');
            }
        }
    </script>

    <link rel="stylesheet" href="css/normalize.min.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/jquery.fancybox.css">
    <link rel="stylesheet" href="css/flexslider.css">
    <link rel="stylesheet" href="css/styles.min.css">
    <link rel="stylesheet" href="css/queries.css">
    <link rel="stylesheet" href="node_modules/animate.css/animate.min.css" onerror="loadCssFromCDN('animate.css')">
    <link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css" onerror="loadCssFromCDN('font-awesome.css')">
    <script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
</head>
<body id="top">
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade
    your browser</a> to improve your experience.</p>
<![endif]-->
<section class="hero">
    <section class="navigation">
        <header>
            <div class="header-content">
                <div class="logo"><a href="#"><img src="img/logo.png" alt="Logo"></a></div>
                <div class="header-nav">
                    <nav>
                        <ul class="primary-nav">
                            <li><a href="#intro">How we met</a></li>
                            <li><a href="#events">Events</a></li>
                            <li><a href="#instagram">Instagram</a></li>
                            <li><a href="#eng-pics">Engagement</a></li>
                            <li class="hidden-sm hidden-xs"><a href="#video-bg">Glimpse of the city</a></li>
                        </ul>
                        <ul class="member-actions">
                            <li><a href="#map" class="login">Venue</a></li>
                            <li><a href="#rsvp" class="btn-white btn-small">RSVP</a></li>
                        </ul>
                    </nav>
                </div>
                <div class="navicon">
                    <a class="nav-toggle" href="#"><span></span></a>
                </div>
            </div>
        </header>
    </section>
    <div class="container">
        <div class="row">
            <div class="col-md-10 col-md-offset-1">
                <div class="hero-content text-center">
                    <!--<h1>Ram and Antara</h1>-->
                    <img src="img/logo-lg.png">
                    <!--<p class="intro">Ram & Antara are getting hitched!</p>-->
                    <!--<a href="#" class="btn btn-fill btn-large btn-margin-right">Scroll Down</a> -->
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-4 hidden-xs"></div>
            <div class="col-sm-4 hidden-xs text-center"><a href="#rsvp"
                                                           class="btn btn-accent btn-large rsvp-btn">RSVP</a></div>
            <div class="col-sm-4 hidden-xs"></div>
        </div>
    </div>
    <div class="down-arrow floating-arrow"><a href="#invitation"><i class="fa fa-angle-down"></i></a></div>
</section>

<section id="invitation" class="section-padding">
    <div class="container">
        <div class="row">
            <div class="col-md-12 text-center">
                <h3>We are getting hitched</h3>
                <p>The dates are 27<sup>th</sup> & 28<sup>th</sup> of November '17 and we would like you to be a part of
                    it.</p>
                <div class="share-bar"></div>
            </div>
        </div>
    </div>
</section>

<section id="intro">
    <div class="container">
        <div class="row">
            <div class="col-md-12 text-center">
                <h3 class="header">How we met</h3>
            </div>
        </div>
        <div class="row">
            <div class="col-md-3 hidden-sm hidden-xs"><img src="img/IMG_2317.jpg" class="wp1"></div>
            <div class="col-md-6">
                <p>
                    I first saw Antara in the Fall of 2008 when we started our undergrad. I was instantly attracted to
                    her but was far too nervous to speak to her. I had told my friend I liked her and news had traveled
                    fast and she soon found out. Her first reaction was "Who is Ram?" and she began searching for me in
                    the class. She started to take notice of me and no matter how boring the lecture was, we never
                    missed a class after that. After a good few months I finally plucked up the courage to ask her out
                    and the rest is history :)
                </p>
            </div>
            <div class="col-md-3 hidden-sm hidden-xs"><img src="img/DSD_0214.jpg" class="wp2"></div>
        </div>
        <div class="row">
            <div class="col-sm-4 col-sm-push-2 col-xs-6 hidden-md hidden-lg"><img src="img/IMG_2317.jpg" class="wp8"></div>
            <div class="col-sm-4 col-sm-push-2 col-xs-6 hidden-md hidden-lg"><img src="img/DSD_0214.jpg" class="wp9"></div>
        </div>
    </div>
</section>

<section class="events section-padding" id="events">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h3 class="header">Events</h3>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6 col-sm-12 col-xs-12 leftcol">
                <div class="wp3">
                    <p><strong>27th November</strong></p>

                    <h5>Mehndi <span class="time">1PM - 5PM</span></h5>
                    <p>It's one of the oldest traditional Indian pre wedding ceremony where the bride and groom
                        attend the event together and a professional mehndi artist applies
                        mehndi to the bride's hands and feet. This will be having a celebratory
                        festival feel to it with people wearing vibrant clothes and dancing, singing, playing
                        games and a lot more.</p>
                </div>
                <div class="wp5">
                    <h5>Cocktail Night <span class="time">7PM - 12AM</span></h5>
                    <p>This event is no way close to ethnic. The bride & groom would like to have some "shots before the
                        knot". With booze flowing down the floor and the western attire on, everyone would be busy
                        showing off their new moves on the stage which they have finely honed. Lastly, expect some beer
                        pong matches & karaoke for sure.</p>
                </div>
            </div>
            <div class="col-md-6 col-sm-12 col-xs-12 rightcol">
                <div class="wp4">
                    <p><strong>28th November</strong></p>

                    <h5>Haldi <span class="time">10AM-11AM</span></h5>
                    <p>The haldi ceremony is usually held separately for the bride and the groom. This one is for the
                        bride. It is a low-key event that involves the application of turmeric paste on the hands, legs
                        and face of the bride. The groom is not allowed to see the bride after this ritual until the
                        final wedding ceremony starts.</p>
                </div>
                <div class="wp6">
                    <h5>Wedding <span class="time">6PM-12AM</span></h5>
                    <p>This is the main event in the entire wedding when the bride and the groom tie the
                        knot. The groom comes with the barat and is greeted by the bride side with some dhol of course
                        as maximum number of guests would be attending this event. This is when the couple circle the
                        sacred fire and are finally declared husband and wife.</p>
                </div>
            </div>
        </div>
        <div class="row section-padding">
            <div class="col-md-4 col-md-offset-4 text-center">
                <a class="btn btn-accent btn-small" data-toggle="modal" data-target="#dc-modal">
                    <i class="fa fa-barcode"></i>&nbsp;&nbsp;Dress code
                </a>
            </div>
        </div>
        <!--<div class="row">
            <div class="col-xs-12 section-border section-padding">
            </div>
        </div>-->
    </div>

    <div id="dc-modal" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span>&times;</span>
                    </button>
                    <h3 class="text-center section-padding">Ugh... dress codes?</h3>
                    <h5>Mehndi <span class="time">1PM - 5PM</span></h5>
                    <p>
                        <strong>Ethnic indian wear</strong>
                        <br>
                        Ladies can wear something
                        <a href="https://www.pinterest.com/ramswarooppatra/mehndi-dress-for-women/">bright & vivid</a>
                        and gentlemen can be on
                        their <a href="https://www.pinterest.com/ramswarooppatra/mehndi-dress-for-men/">vibrant
                        kurtas</a> with pants or pyjamas along with an optional shawl.
                    </p>
                    <h5>Cocktail Night <span class="time">7PM - 12AM</span></h5>
                    <p>
                        <strong>Western attire</strong>
                        <br>
                        A semi-formal look that is contemporary & fashionable which is not too prim & proper is the best
                        to pull off this night. You can see some pins for
                        <a href="https://www.pinterest.com/ramswarooppatra/cocktail-night-outfit-for-women/">ladies</a>
                        & <a href="https://www.pinterest.com/ramswarooppatra/cocktail-night-outfit-for-men/">gents</a>.
                    </p>
                    <h5>Wedding <span class="time">6PM-12AM</span></h5>
                    <p>
                        <strong>Indo-western</strong>
                        <br>
                        Ladies can flaunt their unconventional sarees,
                        <a href="https://www.pinterest.com/ramswarooppatra/indo-western-lehengas/">lehengas</a>,
                        <a href="https://www.pinterest.com/ramswarooppatra/indo-western-anarkalis/">anarkalis</a>,
                        dresses and the list
                        goes on whereas gentlemen can wear any kind of suit or just blazer. If you don't like to wear a
                        suit/blazer, you can do a <a
                            href="https://www.pinterest.com/ramswarooppatra/high-neck-jackets-for-men/">high-neck
                        (band gala) waistcoat & shirt</a> combo.
                    </p>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

</section>

<section id="instagram" class="section-padding">
    <div class="container">
        <div class="row">
            <div class="col-md-12 text-center">
                <h3>A picture is worth a thousand words!</h3>
                <p>Help us capture the moment, tag your photos with the hashtag
                    <a href="https://instagram.com/explore/tags/ramandantara/" target="_blank">#RamAndAntara</a>
                </p>
            </div>
        </div>
        <div class="row section-border wp7">
            <div class="col-md-4 col-md-offset-4">
                <img src="img/iphone_instagram.jpg">
            </div>
        </div>
    </div>
</section>

<section id="eng-pics" class="section-padding">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12 text-center">
                <h3 class="header">Engagement Pics</h3>
            </div>
        </div>
        <div class="row">
            <div class="col-md-2">
                <a class="fancybox" rel="group" href="img/eng_pics/_RFX2942-lg.jpg">
                    <div class="img-wrap">
                        <div class="overlay">
                            <i class="fa fa-search"></i>
                        </div>
                        <img src="img/eng_pics/_RFX2942-sm.jpg" alt=""/>
                    </div>
                </a>
            </div>
            <div class="col-md-2">
                <a class="fancybox" rel="group" href="img/eng_pics/IMG_3483-lg.jpg">
                    <div class="img-wrap">
                        <div class="overlay">
                            <i class="fa fa-search"></i>
                        </div>
                        <img src="img/eng_pics/IMG_3483-sm.jpg" alt=""/>
                    </div>
                </a>
            </div>
            <div class="col-md-2">
                <a class="fancybox" rel="group" href="img/eng_pics/_RFX2992-lg.jpg">
                    <div class="img-wrap">
                        <div class="overlay">
                            <i class="fa fa-search"></i>
                        </div>
                        <img src="img/eng_pics/_RFX2992-sm.jpg" alt=""/>
                    </div>
                </a>
            </div>
            <div class="col-md-2">
                <a class="fancybox" rel="group" href="img/eng_pics/_RFX3064-lg.jpg">
                    <div class="img-wrap">
                        <div class="overlay">
                            <i class="fa fa-search"></i>
                        </div>
                        <img src="img/eng_pics/_RFX3064-sm.jpg" alt=""/>
                    </div>
                </a>
            </div>
            <div class="col-md-2">
                <a class="fancybox" rel="group" href="img/eng_pics/NGP_4089-lg.jpg">
                    <div class="img-wrap">
                        <div class="overlay">
                            <i class="fa fa-search"></i>
                        </div>
                        <img src="img/eng_pics/NGP_4089-sm.jpg" alt=""/>
                    </div>
                </a>
            </div>
            <div class="col-md-2">
                <a class="fancybox" rel="group" href="img/eng_pics/NGP_4119-lg.jpg">
                    <div class="img-wrap">
                        <div class="overlay">
                            <i class="fa fa-search"></i>
                        </div>
                        <img src="img/eng_pics/NGP_4119-sm.jpg" alt=""/>
                    </div>
                </a>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="row hidden-lg hidden-md hidden-xs">
            <div class="col-xs-12 section-border section-padding"></div>
        </div>
    </div>
    <!--<div class="row">
        <div class="col-md-12">
            <div class="diamond floating-logo">
                <img src="img/sketch-logo.png" alt="Sketch Logo">
                <div class="ring"></div>
            </div>
        </div>
    </div>-->
</section>

<section id="video-bg" class="hidden-sm hidden-xs">
    <div id="bgndVideo" class="player"
         data-property="{videoURL:'https://youtu.be/9giqL1H6yRs',containment:'#video-bg',autoPlay:true, mute:true, showControls:false, startAt:80, stopAt:259, opacity:1}">
    </div>
    <div id="video-content">
        <h5>Kolkata</h5>
        <p>City of joy</p>
    </div>
</section>

<section id="map" class="section-padding">
    <div class="text-center">
        <h3>How do I get there?</h3>
        <p>It's way easier than you think!</p>
    </div>
    <div id="map-canvas"></div>
    <div id="map-content-wrapper" class="container pointer-events-none">
        <div class="row">
            <div class="col-xs-offset-1 col-xs-10 col-md-offset-3 col-md-6">
                <div class="text-center">
                    <div id="btn-show-content" class="toggle-map-content pointer-events-auto">
                        <i class="fa fa-info-circle"></i>&nbsp;&nbsp; Show info
                    </div>
                </div>
                <div id="map-content" class="pointer-events-auto">
                    <div class="row">
                        <div class="col-md-6">
                            <h5>ITC Fortune Park</h5>
                            <p>Kona Expressway, Howrah, West Bengal 711403, India</p>
                        </div>
                        <div class="col-md-6">
                            <h5>Mr. Amit Roy</h5>
                            <p><i class="fa fa-mobile"></i> <a href="tel://+919412345678">+91 9412345678</a><br>
                                <i class="fa fa-mobile"></i> <a href="tel://+917123456789">+91 7123456789</a></p>
                        </div>
                    </div>
                    <div class="row text-center">
                        <div class="col-md-6" style="padding: 5px;">
                            <a class="btn btn-fill btn-small"
                               href="https://m.uber.com/ul/?action=setPickup&client_id=Yh7Dl6SjB56RY2JuuZF8ttVa6ryFV78W&pickup=my_location&dropoff[formatted_address]=Fortune%20Park%20Panchwati%20-%20Hotels%20in%20Kolkata%2C%20Howrah%2C%20West%20Bengal%2C%20India&dropoff[latitude]=22.593276&dropoff[longitude]=88.270277"><i
                                    class="fa fa-taxi"></i>&nbsp;&nbsp;Book Uber</a>
                        </div>
                        <div class="col-md-6" style="padding: 5px;">
                            <a class="btn btn-accent btn-small" id="btn-show-map"><i class="fa fa-map-marker"></i>&nbsp;&nbsp;Show
                                map</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="rsvp text-center" id="rsvp">

    <div id="rsvp-modal" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span>&times;</span>
                    </button>
                    <div class="section-padding">
                        <h3>Thank you!</h3>
                        <p>We are glad to see you join us on our big day.</p>
                        <div id="add-to-cal"></div>
                    </div>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    <div class="container">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <h3>What are you waiting for?</h3>
                <p>We would greatly appreciate if you could RSVP before 1st of November '17</p>
                <form id="rsvp-form" class="rsvp-form"
                      action=""
                      method="POST">
                    <div class="row">
                        <div class="col-md-6 col-sm-6">
                            <div class="form-input-group">
                                <i class="fa fa-envelope"></i><input type="email" name="email" class=""
                                                                     placeholder="Your email"
                                                                     required>
                            </div>
                        </div>
                        <div class="col-md-6 col-sm-6">
                            <div class="form-input-group">
                                <i class="fa fa-user"></i><input name="name" class=""
                                                                 placeholder="Your name"
                                                                 required>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 col-sm-6">
                            <div class="form-input-group">
                                <i class="fa fa-users"></i><input type="number" name="extras" class="" min="0"
                                                                  max="4"
                                                                  placeholder="Husband/Wife or kids"
                                                                  required>
                            </div>
                        </div>
                        <div class="col-md-6 col-sm-6">
                            <div class="form-input-group">
                                <i class="fa fa-key"></i><input type="number" name="invite_code" id="invite_code"
                                                                class="" min="0"
                                                                placeholder="Invite code"
                                                                required>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12" id="alert-wrapper"></div>
                    </div>
                    <button class="btn-fill rsvp-btn">
                        Yes,
                        that's me!
                    </button>
                </form>
            </div>
        </div>
    </div>
</section>

<footer>
    <div class="container">
        <div class="row">
            <div class="col-sm-12 text-center content">
                <span class="to-top-wrapper"><a href="#top" class="to-top"><i class="fa fa-angle-up"></i></a></span>
                <p>Crafted by Ram with lots of <span class="fa fa-heart pulse2"></span> for Antara</p>
            </div>
        </div>
    </div>
</footer>
<script src="js/vendor/jquery-1.11.2.min.js" onerror="loadJsFromCDN('jquery.js')"></script>
<script src="node_modules/waypoints/lib/jquery.waypoints.min.js" onerror="loadJsFromCDN('waypoints.js')"></script>
<script src="js/jquery.fancybox.pack.js"></script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/jquery.flexslider-min.js"></script>
<script src="js/jquery.mb.YTPlayer.min.js"></script>
<script src="js/vendor/ouical.js"></script>
<script src="js/scripts.min.js"></script>
<script async defer
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBlPw3GQYI3faa_9mRE6plWuM7xNEmrwH0&callback=initMap"></script>
<!-- Google Analytics -->
<script>
    (function (i, s, o, g, r, a, m) {
        i['GoogleAnalyticsObject'] = r;
        i[r] = i[r] || function () {
            (i[r].q = i[r].q || []).push(arguments)
        }, i[r].l = 1 * new Date();
        a = s.createElement(o),
            m = s.getElementsByTagName(o)[0];
        a.async = 1;
        a.src = g;
        m.parentNode.insertBefore(a, m)
    })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
    ga('create', 'UA-46465113-4', 'auto');
    ga('send', 'pageview');
</script>
</body>
</html>
